@import "@/components/visualization/styles/function.scss";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.balance-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .balance-main {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    padding: vw(16);
    padding-bottom: 0;

    .balance-list {
      width: 100%;
      margin: vw(9) 0;

      &:nth-child(1) {
        margin-top: 0;
      }

      &:hover {
        .balance-list-top {
          .balance-list-left {
            font-weight: bold;
            color: rgba(35, 39, 59, 1);
          }
          .balance-list-right {
            color: rgba(24, 144, 255, 1);

            &::after {
              color: rgba(24, 144, 255, 1);
            }
          }
        }
        .balance-list-bar-active {
          background: #1890ff;
        }
      }

      .balance-list-top {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .balance-list-left {
          font-size: vw(14);
          font-family: Microsoft YaHei UI;
          font-weight: 400;
          color: rgba(35, 39, 59, 0.64);
        }

        .balance-list-right {
          font-size: vw(16);
          font-family: Bahnschrift;
          font-weight: 400;
          color: rgba(35, 39, 59, 1);

          &::after {
            content: attr(data-unit);
            font-size: vw(14);
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            color: rgba(35, 39, 59, 0.4);
          }
        }
      }

      .balance-list-bar {
        width: 100%;
        height: vw(6);
        background: rgba(35, 39, 59, 0.08);
        position: relative;
        margin-top: vw(4);

        &-active {
          height: vw(6);
          background: rgba(238, 200, 84, 1);
        }
      }
    }
  }
}
